<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="审易A8(For all platform)" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>系统信息</title>
    <style>
        .styled-table {
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            font-family: sans-serif;
            max-width: 430px;
            min-width: 410px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }

        .styled-table thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }

        .styled-table th,
        .styled-table td {
            padding: 12px 15px;
            text-align: center;
        }

        .styled-table tbody tr {
            border-bottom: 1px solid #dddddd;
        }

        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }

        .styled-table tbody tr.active-row {
            font-weight: bold;
            color: #009879;
        }
    </style>
</head>

<body style="user-select: none; overflow: hidden;">
    <div style="display: flex; flex-direction: column;">
        <!-- <div style="width: 100%; margin-top: 8px; text-align: center; color: #9c27b0;">
            <h4>系统信息</h4>
        </div> -->
        <div style="width: 100%; text-align: center; color: #9c27b0; padding-left: 8px;">
            <table class="styled-table">
                <thead>
                    <tr>
                        <th>参数名称</th>
                        <th>参数值</th>
                    </tr>
                </thead>
                <tbody id="info-detail">
                    <!-- and so on... -->
                </tbody>
            </table>
        </div>
        <div style="width: 100%; margin-top: 10px; text-align: center;">
            <button id="copy-and-close"
                style="color: white; background-color: #1976d2; border: 1px solid #CCC; cursor: pointer;">复制内容并关闭</button>
        </div>
    </div>
</body>

<script>
    let sysInfo = null;
    window.api.getSystemInfo().then(function (res) {
        let infos = res;
        sysInfo = infos;
        let infoDetail = document.getElementById('info-detail');
        let infoHtmls = [];
        for (let info in infos) {
            let infoValue = infos[info];
            if (typeof infoValue === 'string') {
                infoHtmls.push(`<tr><td>${info}</td><td style="text-overflow: ellipsis; max-width: 280px; overflow: hidden;">${infoValue}</td></tr>`);
            }
        }
        infoDetail.innerHTML = infoHtmls.join('\n');
    });
    document.getElementById("copy-and-close").addEventListener('click', async function () {
        await navigator.clipboard.writeText(JSON.stringify(sysInfo));
        window.api.closeModal();
    });
</script>

</html>